Navigation rail XR 導航軌道

Types 型別

導航欄軌道器有兩種型別:內含式懸浮操作按鈕(FAB)欄和空間式懸浮操作按鈕(FAB)欄。

1 Contained FAB rail 2 Spatialized FAB rail

Anatomy 結構

1 Container 2 Active indicator 3 Large badge (optional) 4 Badge (optional) 5 Large badge label (optional) 6 Label text 7 Icon 8 Embedded or spatialized FAB (optional) 9 Menu icon (optional)

Usage 用法

在全空間檢視中,可以使用導航軌道來增強使用者體驗。注意,特殊的空間功能(包括導航軌道器)只能在全空間檢視中使用。而在普通的家庭空間檢視中,導航軌道會和頁面內容保持在同一平面上,呈現傳統的2D介面效果。

二維轉三維時,導航欄軌道器的行為和位置會發生變化

Placement  放置位置

Navigation context 導航上下文

導航欄可以選擇兩種放置方式:可以直接和空間面板重疊,或者在旁邊放置並保持20dp的間距,讓視覺效果更清晰。

導航軌道的位置取決於它的用途:1 如果是控制整個應用的功能,就把它放在外側(偏移位置) 2 如果只是控制某個特定區域的功能,就把它放在內側(內嵌位置)

Inset positioning  內嵌定位

避免遮擋頁面內容。導航欄和麵板重疊時,重疊部分應保持在12dp,並且不要超過導航欄寬度的一半,這樣可以保持頁面整潔有序。

× 避免將內嵌導航與面板重疊部分超過導航寬度的一半

Vertical alignment  垂直對齊

導航欄可以放在面板的上方、中間或居中位置。不同的位置會讓導航欄更容易看到和使用。

選擇位置時要考慮你的應用設計需求和使用者使用體驗。

將導航軌道器對齊到空間話面板的頂部或中心
× 導航軌道器放置的高度不應超過相鄰空間面板的高度。

Pane alignment  面板對齊方式

不要把導航欄放在兩個空間面板中間,這樣會讓介面看起來很亂。如果你的應用有三個或更多的空間面板,這時候可以使用導航欄。

× 不要將導航軌道器放置在兩個面板中間

Spatialized FAB 空間化懸浮操作按鈕(FAB)

導航欄有兩種放置懸浮操作按鈕(FAB)的方式:

選擇建議:

在帶有內建FAB導航軌道器與FAB之間進行選擇

為了讓設計更加協調,把懸浮操作按鈕(FAB)放在導航欄附近。兩者之間要保持20dp的距離。懸浮操作按鈕可以放在導航欄的上面或下面。

將FAB放在靠近導航軌道器的位置

雖然懸浮操作按鈕(FAB)和導航欄通常會放在一起,但你可以根據需要調整它們的位置。

× 避免放置過高或過低,遠離導航軌道器的位置